<template>
  <nav-bar :cates="cates" :size="4"></nav-bar>
  <search-bar @keyword="search"></search-bar>
  <template v-if="searchResult.list && searchResult.list.length > 0">
      <div class="row">
       <div class="col-md-2"  v-for="p of searchResult.list" :key="p.goodsId">
        <product :product="p"></product>
      </div>
  </div>
  </template>
  <template v-else>
      <div
      class="col-md-6 col-md-offset-3 text-center"
      v-if="!searchResult.list || searchResult.list.length == 0"
      role="alert"
    >
      <span class="alert alert-danger"> 对不起，暂无此类商品 </span>
    </div>
  </template>
<table align="right">
    <tbody>
      <tr>
        <td>
          <nav aria-label="Page navigation">
            <ul class="pagination pagination-right">
              <li>
                <a
                  href="#"
                  @click.prevent="switchPage(searchResult.pageNo - 1)"
                  aria-label="Previous"
                >
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li v-for="idx in searchResult.totalPage" :key="idx">
                <a href="#" @click.prevent="switchPage(idx)">{{ idx }}</a>
              </li>
              <li>
                <a
                  href="#"
                  @click.prevent="switchPage(searchResult.pageNo + 1)"
                  aria-label="Next"
                >
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
        </td>
      </tr>
    </tbody>
  </table>

  
</template>
<script>
import { mapGetters } from "vuex";
import { http } from "../utils/http";
import SearchBar from "../components/SearchBar.vue";
import NavBar from '../components/NavBar.vue'
import Product from "../components/Product.vue";
export default {
  components: {
    NavBar,
    SearchBar,
    Product
  },
  data() {
    return {
      keyword:'',
     searchResult: {},
    };
  },
  computed: {
    ...mapGetters({
      cates: "cate/cates",
    }),
  },
  methods: {
    search(kw){
      this.$router.push({name:'Search',query:{keyword:kw}})
    },
    switchPage(pageNo){
      console.log(pageNo)
     this.searchProducts(this.keyword,pageNo)
    },
    searchProducts(kw,pageNo) {
      console.log(kw,pageNo)
      let params={keyword:kw};
      if(pageNo){
        params={keyword:kw,pageNo:pageNo}
      }
      http
        .get("/goods/searchGoods", { params })
        .then((resp) => {
          if (resp.data.code == 0) {
            this.searchResult = resp.data.searchGoods;
          }
        });
    },
  },
  beforeRouteUpdate(to) {
    this.keyword = to.query.keyword;
    this.searchProducts(this.keyword);
  },
  created() {
      if (this.cates.length == 0) {
      this.$store.dispatch("cate/fetchCates");
    }
  
    this.keyword = this.$route.query.keyword;
    this.searchProducts(this.keyword);

       
  },
};
</script>
